import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex);

// 全局变量  全局方法   响应式  咱们的整个程序里都可以很方便的拿到   

// 1. vuex里的数据怎么取

export default new Vuex.Store({
	state: {
		//  放数据的  
		TOKEN: "",
		uid: "",
		username: "",
		userInfo: {},
		publish_num: 0,
		liked_num: 0
	},
	mutations: {
		// 改数据的 

		SET_DATA(state, {
			key,
			value
		}) {
			state[key] = value
		},
		LOGOUT(state) {
			localStorage.removeItem('uid')
			localStorage.removeItem('token')
			localStorage.removeItem('username')
			localStorage.removeItem('tokenExpired')
			state.TOKEN = '';
			state.uid = '';
			state.username = '';
			state.publish_num = 0;
			state.liked_num = 0;
			state.userInfo = {};

		}

	},
	actions: {
		//  事件   异步操作  操作完毕后通过  mutations改数据
		// 全多次会用到的方法  
		login({
			commit,
			dispatch,
			state
		}, params) {

			let {
				username,
				password
			} = params;
			return Vue.prototype.$http.post('/user/login', {
				username,
				password
			})

		},

		async qnUplaod({
			commit,
			dispatch,
			state
		}, file) {
			// let file =  this.fileList[index].file;//
			let {
				type
			} = file; // 假设只有一张图 
			//  拿到类型  比如jpg
			type = type.split('/')[1];
			// 重新命名
			let file_name = `${new Date(
		  ).getTime()}_${Math.random()
		  	.toString(36)
		  	.slice(2)}.${type}`;
			// 去自己的服务器拿到上传七牛云需要的 token  为何放在服务端呢?  主要是为了安全，因为里边包含了一些账号信息
			let {
				token
			} = await Vue.prototype.$http.post('/upload/token');
			// new一个form data   并且把文件 token  和文件的名字放进去  file token key是固定的 不能改 
			const formdata = new FormData();
			formdata.append('file', file);
			formdata.append('token', token);
			formdata.append('key', file_name);

			// https://upload-z1.qiniup.com 是上传到七牛的真正接口  其中z1是华北区域

			let result = await Vue.prototype.$http.post('https://upload-z1.qiniup.com', formdata);
			// console.log(result);
			// console.log(`http://toutiao.longxiaokj.com/` + result.key);

			// `http://toutiao.longxiaokj.com/` + result.key  这个地址就是传到服务器的地址  
			// 发布文章时 imageSrc  字段需要的就是这个
			return `http://toutiao.longxiaokj.com/` + result.key

		},

		GET_USERINFO({
			commit,
			dispatch,
			state
		}, token) {


			Vue.prototype.$http.post('/user/getuserInfo', {
				token
			}).then(res => {

				console.log(res)

				if (res.code == 0) {

					// ? 
					// state.uid== uid
					// 不管什么时候  vuex里边改数据   commit  调方法 
					commit('SET_DATA', {
						key: "publish_num",
						value: res.publish_num
					});
					commit('SET_DATA', {
						key: "liked_num",
						value: res.liked_num
					});
					commit('SET_DATA', {
						key: "TOKEN",
						value: token
					});
					commit('SET_DATA', {
						key: "uid",
						value: res.uid
					});
					commit('SET_DATA', {
						key: "userInfo",
						value: res.userInfo
					});


				} else {

					this.$toast('获取用户信息失败')

				}
			})

		}

	},
	modules: {

		// 分模块
	}
})
